<template>
  <n-form
      :model="formData"
      :rules="formRules"
      ref="formInstance"
      label-placement="left"
      :label-width="SlashAppContext.getCoefficient()*80 + 'px'">
    <n-grid x-gap="12" :cols="2" responsive="self">
      <n-gi>
        <n-form-item label="角色名称" path="roleName">
          <n-input v-model:value="formData.roleName" placeholder="请输入角色名称"/>
        </n-form-item>
      </n-gi>

      <n-gi>
        <n-form-item label="角色编码" path="roleCode">
          <n-input :disabled="runMode=='update'" v-model:value="formData.roleCode" placeholder="请输入角色编码"/>
        </n-form-item>
      </n-gi>

      <n-gi>
        <n-form-item label="优先级" path="priorityLevel">
          <n-input v-model:value="formData.priorityLevel" type="number" placeholder="请输入优先级"/>
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="是否默认" path="isDefault">
          <n-radio-group v-model:value="formData.isDefault">
            <n-space>
              <n-radio :key="it.value" v-for="it in isDefaultOptions" :value="it.value"
                       :label="it.label"/>
            </n-space>
          </n-radio-group>
        </n-form-item>
      </n-gi>
      <n-gi>

        <n-form-item label="启用" path="enabled">
          <n-radio-group v-model:value="formData.enabled">
            <n-space>
              <n-radio :key="it.value" v-for="it in enabledOptions" :value="it.value"
                       :label="it.label"/>
            </n-space>
          </n-radio-group>
        </n-form-item>
      </n-gi>
      <n-gi>
        <n-form-item label="允许删除" path="allowDel">
          <n-radio-group v-model:value="formData.allowDel">
            <n-space>
              <n-radio :key="it.value" v-for="it in allowDelOptions" :value="it.value"
                       :label="it.label"/>
            </n-space>
          </n-radio-group>
        </n-form-item>
      </n-gi>
    </n-grid>
  </n-form>
</template>
<script lang="ts">
import {onMounted, ref} from "vue";
import {allowDelOptions, enabledOptions, formRules, isDefaultOptions} from "./Service";
import httpApi from "./httpApi";
import {FormInst} from "naive-ui";
import {SlashAppContext, checkFormData} from "slash-admin";

export default {
  props: {
    id: {
      type: [String, Number],
      default: null
    },
    runMode: {
      type: [String],
      default: "read"
    }
  },
  setup: function (props) {
    const formInstance = ref<FormInst | null>(null);
    const formData = ref<any>({
      id: props.id,
      enabled: 1,
      isDefault: 0,
      allowDel: 1,
      priorityLevel: 0
    });
    const init = async () => {
      if (props.id) {
        let msg = await httpApi.selectById(props.id);
        formData.value = msg.data;
      }
    };
    const doSubmit = async () => {
      console.log(formData.value);
      await checkFormData(formInstance);
      return httpApi.doSaveEntity(formData.value);
    };
    const doUpdate = async () => {
      await checkFormData(formInstance);
      return httpApi.doUpdateEntity(formData.value);
    };
    onMounted(() => {
      init();
    });
    return {
      isDefaultOptions,
      enabledOptions,
      allowDelOptions,
      formData,
      formInstance,
      formRules,
      doSubmit,
      doUpdate,
      SlashAppContext
    };
  }
};
</script>

<style lang="less" scoped></style>
